<template>
<div class="ui dimmer page transition" :class="{active: active}" @click="oncancel">
    <div class="ui modal visible active">
        <div class="header"><i class="icon remove" @click="oncancel"></i></div>
        <div class="content" @click.stop="">
            <div class="ui from segment">
                <h3>退款规则</h3>
                <div class=" fields inline">
                    <label>出行时间</label>
                    <div class="field">
                        <select class="ui fluid search dropdown" v-model="rulesDataCopy.refund_time[0]">
                                <option :value="index" v-for='(item, index) in targetDayList'>{{item}}</option>
                            </select>
                    </div>

                    <div class="field">
                        <label>的</label>
                        <select class="ui fluid search dropdown" v-model="rulesDataCopy.refund_time[1]">
                                <option v-for='item in refundTimeHourList' :value="item">
                                    {{(item + 100).toString().slice(1)}}
                                </option>
                            </select>
                    </div>
                    <div class="field">
                        <select class="ui fluid search dropdown" v-model="rulesDataCopy.refund_time[2]">
                                <option :value="item" v-for="item in refundTimeMinuteList">
                                    {{(item + 100).toString().slice(1)}}
                                </option>
                            </select>
                    </div>
                    <span class='orginMessage'><i class="warning circle icon"></i>申请退款时超过设定的日期则需要收取手续费</span>
                </div>

                <div class="fields inline">
                    <label>手续费（每份）</label>
                    <div class="field">
                        <input type="number" v-model='rulesDataCopy.refund_fee_per'> <label>%+</label>
                    </div>

                    <div class="field">
                        <input type="number" v-model='rulesDataCopy.refund_fee_extra'> <label>元</label>
                    </div>
                </div>

                <div class="fields inline">
                    <label>生效日期</label>
                    <div class="ui radio field inline">
                        <input type="radio" v-model='useEffectTime' name='useEffectTime' value="0">
                        <label>立即</label>
                    </div>
                    <div class="ui radio field inline">
                        <input type="radio" v-model='useEffectTime' name='useEffectTime' value='1'>
                        <label><span v-show='useEffectTime==0'>选择时间</span></label>
                        <myDatepicker v-show='useEffectTime==1' :date="effect_time" :limit="limit"></myDatepicker>
                    </div>
                </div>
                <div class="ui  vertical masthead center aligned segment ">
                    <button class="ui secondary button" @click="rulesSubmit">确认 </button>
                    <button class="ui button" @click="oncancel">取消 </button>
                </div>
            </div>

        </div>
    </div>
</div>
</template>
<script>
import tool from 'src/util/tool';
import util from '_util/index';

import tFields from 'components/tunit/tFields'
import editCom from 'components/edit/editCom'
import myDatepicker from 'components/common/vue-datepicker'
export default {
    data() {
        return {
            vo: {},
            effect_time: {
                time: ''
            },
            useRefundTime: false,
            refundTimeMinuteList: [0, 30],
            useEffectTime: 0,
            targetDayList: ["当天", "前一天", "前两天", "前三天", "前四天", "前五天", "前六天", "前七天"],
            rulesDataCopy: {
                refund_time: [0, 0, 0],
                effect_time: '',
                refund_fee_per: 0,
                refund_fee_extra: 0,
            },
            limit: [{
                    type: 'weekday',
                    available: [1, 2, 3, 4, 5, 6, 0]
                },
                {
                    type: 'fromto',
                    from: new Date(),
                    to: '2020-12-31'
                }
            ],
        }
    },
    components: {
        tFields,
        myDatepicker
    },
    methods: {
        closepop() {
            this.$emit("onhide");
        },
        checkInput() {
            //检查输入
            if (!(this.rulesDataCopy.refund_fee_per * 1 >= 0 && this.rulesDataCopy.refund_fee_per != '')) {
                util.showMsg(this, 'error', '请输入正确的手续费');
                return false;
            }
            if (!(this.rulesDataCopy.refund_fee_extra * 1 >= 0 && this.rulesDataCopy.refund_fee_per != '')) {
                util.showMsg(this, 'error', '请输入正确的手续费');
                return false;
            }
            return true
        },
        rulesSubmit() {
            if (this.checkInput()) {
                let data = this.rulesDataCopy;
                if (this.useEffectTime) {
                    data.effect_time = this.effect_time.time;
                }
                this.$emit('rulesSubmit', data);
                this.oncancel();
            }

        },
        oncancel() {
            this.$emit('oncancel');
            this.closepop();
        },
        showDatePiker() {

        }
    },
    props: {
        active: {
            type: Boolean,
            default () {
                return false
            }
        },
        productData: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    watch: {
        data: {
            immediate: true,
            handler(val) {}
        },
        active: {
            immediate: true,
            handler(val) {
                this.isActive = val;
            }
        },
        isActive(val) {
            this.$emit(val ? "onshow" : "onhide", this.vo);
        },
    },
    computed: {
        refundTimeHourList() {
            let data = [];
            for (var i = 0; i < 24; i++) {
                data.push(i)
            };
            return data
        },
        component_name() {
            return this.page || "tFields"
        }
    },
    created() {
        this.effect_time.time = this.productData.effect_time;
        Object.keys(this.rulesDataCopy).forEach(item =>{
            if(this.productData[item]){
                this.rulesDataCopy[item] = this.productData[item]
            }
        })
    }
}
</script>
<style lang="less" scoped>
.orginMessage {
    color: rgb(253,153,115);
}
.ui.dimmer > .ui.modal {
    background-color: transparent;
    height: 100%;
    position: relative;
    margin: 0 auto !important;
    left: inherit;
    top: inherit;
    @_top: 15%;
    @_bottom: 3%;
    .header {
        background-color: transparent;
        text-align: right;
        padding: 20px 0;
        position: absolute;
        left: 0;
        right: 0;
        top: @_top;
        margin-top: -66px;
        .icon {
            color: #fff;
            cursor: pointer;
        }
    }
    .ui.secondary.button {
        margin-right: 20px;
    }
    .content {
        position: absolute;
        top: @_top;
        height: auto;
        max-height: 100% - @_bottom - @_top;
        overflow: auto;
    }
}
</style>
